<template>
	<view class="content">
		<u-navbar title="我的团购" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>

		<view class="group_list">
			<template v-for="(item,index) in groupData">
				<view class="group_item" :key="index" @click="navigateTo('/pages_goods/group-detail/group-detail?id='+item.id)">
					<view class="goods_num">
						<view class="goods_img">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="goods_detail">
							<view class="goods_title">
								{{item.commodityName}}
							</view>
							<view class="group_detail">
								<view class="left">
									团购价格：
								</view>
								<view class="right">
									{{item.specificationPrice.toFixed(2)}}
								</view>
							</view>
							<view class="group_detail">
								<view class="left">
									团购人数：
								</view>
								<view class="right">
									{{item.buyQuantity}}
								</view>
							</view>
							<view class="group_detail">
								<view class="left">
									团长：
								</view>
								<view class="right">
									{{item.xxx}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		groupList
	} from '../../../api/mine.js'
	export default {
		data() {
			return {
				groupData: []
			}
		},
		created() {
			this.getGroupList()
		},
		methods: {
			async getGroupList() {
				const res = await groupList()
				console.log(res);
				this.groupData = res.data
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;

		.line {
			padding: 20rpx 0;
		}

		.group_list {
			padding-top: 30rpx;

			.group_item {
				background-color: #fff;
				padding: 20rpx 30rpx;
			}
		}

		.goods_num {
			display: flex;

			.goods_img {
				width: 200rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}

			}

			.goods_detail {
				// padding: 30rpx 0;
				margin-left: 20rpx;
				// width: 396rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.group_detail {
				display: flex;

				.left {
					font-size: 26rpx;
					color: #333332;
				}

				.right {
					font-size: 32rpx;
					color: #FF594D;
				}
			}

			.goods_title {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				height: 46rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				color: #333332;
			}

			.good_price {
				font-size: 24rpx;
				display: flex;
				justify-content: flex-start;
				color: #F44236;
				font-size: 32rpx;

				.old_price {
					padding-left: 20rpx;
					padding-top: 6rpx;
					font-size: 26rpx;
					color: #777777;
					text-decoration: line-through;
				}

				.num {
					color: #777;
				}
			}

		}

	}
</style>